<%@ page contentType="text/html;charset=UTF-8" language="java"
	session="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
.node {
	stroke: #fff;
	stroke-width: 1.5px;
}

.link {
	stroke: #999;
	stroke-opacity: .6;
}
</style>

<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="resources/scripts/d3.v3.js"></script>
<script>

$.ajax({
	type : 'GET',
	url : 'college/jsontest',
	dataType : 'json',
	async : true,
	success : function(graph) {
		var height = window.innerHeight;
	    var width = window.innerWidth;
	    

	    var nodes = graph.nodes;
	    var links = graph.links;

		canvas = d3.select("body").append("svg")
				.attr("width", width)
				.attr("height", height);

				
		force = d3.layout.force()
				.nodes(nodes)
				.links(links)
				.size([width, height])
				.charge(-100)
				.linkDistance(800)
				.start();

				
		node = canvas.selectAll("circle")
				.data(nodes)
				.enter().append("circle")
				.attr("class", "node")
				.attr("cx", function(d) { return d.x; })
				.attr("cy", function(d) { return d.y; })
				.attr("r", 30)
				.style("fill", "#800000");
				
		node.append("title")
	      .text(function(d) { return d.name; });
				
		link = canvas.selectAll("line")
				.data(links)
				.enter().append("line")
				.attr("class", "link")
				.attr("marker-end", "url(#arrowhead)")
				.style("stroke-width", function(d) { return d.value; })
				.style("stroke", "green")
				.attr("x1", function(d) { return d.source.x; })
				.attr("y1", function(d) { return d.source.y; })
				.attr("x2", function(d) { return d.target.x; })
				.attr("y2", function(d) { return d.target.y; });
				

		force.on("tick", function() {
		
		link.attr("x1", function(d) { return d.source.x; })
			.attr("y1", function(d) { return d.source.y; })
			.attr("x2", function(d) { return d.target.x; })
			.attr("y2", function(d) { return d.target.y; });

		node.attr("cx", function(d) { return d.x; })
			.attr("cy", function(d) { return d.y; });
	});
	},
	error : function(jqXHR, textStatus, errorThrown) {
		alert(jqXHR.status + ' ' + jqXHR.responseText);
	}
});
	
</script>

<html>

<head>
<title>Home</title>
</head>
<body>
</body>
</html>